<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        定义：setIntevalr()方法可按照指定的周期（以毫秒计）来调用函数或者计算表达式
             setIntevalr()方法会不停的调用函数,直到clearInteval被调用或者窗口被关闭。由setInteval()返回的ID值可用作 clearInterval()方法的参数。(这句话很重要)    
        语法:setInteval(code:必填，调用的函数或者要执行的代码串)
                        millisec:可填,周期性执行或者调用code之间的时间间隔，以毫秒计
                        lang:可选 JScript | VBScript | JavaScript)
     -->
    <!-- w3c实例 -->
    <!-- <input type="text" id="clock" />
    <script>
        var int = self.setInterval("clock()", 1000)

        function clock() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("clock").value = t;
        }
    </script>
    <button onclick="window.clearInterval(int)">点击</button> -->
    <br>
    <button onclick="start()">按钮一</button>
    <button onclick="stop()">按钮二</button>
    <script type="text/javascript">
        var interval = null; //计时器
        var i = 0;

        function start() { //启动计时器函数
            if (interval != null) { //判断计时器是否为空
                clearInterval(interval);
                interval = null;
            }
            interval = setInterval(overs, 1000); //启动计时器，调用overs函数，
        }

        function overs() {
            i++;
            console.log(i);
        }

        function stop() {

            clearInterval(interval);
            interval = null;
        }
    </script>
</body>

</html>